body, html {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}
a{color:#999}
.demos-title {
  text-align: center;
  font-size: 34px;
  color: #3cc51f;
  font-weight: 400;
  margin: 0 15%;
}

.demos-sub-title {
  text-align: center;
  color: #888;
  font-size: 14px;
}

.demos-header {
  padding: 35px 0;
}

.demos-content-padded {
  padding: 15px;
}

.demos-second-title {
  text-align: center;
  font-size: 24px;
  color: #3cc51f;
  font-weight: 400;
  margin: 0 15%;
}

footer {
  text-align: center;
  font-size: 14px;
  padding: 20px;
}

footer a {
  color: #999;
  text-decoration: none;
}
body{background-color: #f8f8fc;font-size: 0.8rem}
.weui-grids{}
.weui-grid{width:25%;padding:8px}
.home-header{text-align: center;padding:10px;position:relative;border-bottom: lightgray  1px solid;}
.home-header h2{margin: 0px;padding:0px;font-weight: normal;color:#5b5b5b;font-weight:400;font-size:0.8rem}
.home-header h3{margin: 0px;padding:0px;font-weight: normal;color:#5b5b5b;font-weight:400;font-size:0.8rem}
.menu_active{background-color: #3cc51f}
.circle{
  float: left;
  text-align: center;
  color: #ffffff;
  background-color: orange;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  width:10px;
  height: 10px;
  line-height: 7.5px;
  margin: 5px 5px 0px 5px
}
.top-info{background-color: #ffe6cc;padding:2px 5px;color: orange;font-size:14px}
.weui-grid:before{border-right: 0px }
.weui-flex__item{margin-bottom: 10px;background-color: white}
.weui-panel {
  margin: 0;
  font-size:0.6rem;
}
.weui-media-box {
  padding: 8px 15px;
}
.weui-panel__bd .weui-media-box__hd {
  width: 50px;
  height: 50px;
  line-height: 50px;
  position: relative;
}
.weui-media-box__desc {
  -webkit-line-clamp: 1;
}
.weui-media-box__title {
  margin-top: -4px;
  font-size:14px
}
.weui-media-box__title-after{
  color: #9b9b9b;
  font-size: .65rem;
  float: right;
}
.weui-media-box_appmsg .weui-media-box__thumb{border-radius: 50%;width: 90%;margin-top: 5px}
.weui-media-box__title-after {font-size: .45rem}

.link-array{
  content: " ";
  display: inline-block;
  height: 10px;
  width: 10px;
  border-color: #c8c8cd;
  border-style: solid;
  -webkit-transform: matrix(.71,.71,-.71,.71,0,0);
  transform: matrix(.71,.71,-.71,.71,0,0);
  position: relative;
  top: -8px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  cursor:pointer
}
.link-array-right{
  border-width: 2px 2px 0px 0px;
  right: 16px;
}
.link-array-left{
  border-width: 0px 0px 2px 2px;
  right: 16px;
}

.back-to-pre {
  content: " ";
  display: inline-block;
  height: 10px;
  width: 10px;
  border-width: 0px 0px 2px 2px;
  border-color: #c8c8cd;
  border-style: solid;
  -webkit-transform: matrix(.71,.71,-.71,.71,0,0);
  transform: matrix(.71,.71,-.71,.71,0,0);
  position: relative;
  top: -8px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  left: 16px;
  cursor:pointer
}


.kk-container{
  width: 100%;
  height: 100%;
  margin:0px;
  padding:0px;
  font-size:0.8rem;
  background-color: #e0dfdd;
}

.kk-block-list{
  width: 100%;
  margin: 0px;
  padding: 0px;
}
.kk-block{
  border-radius: 3%;min-height: 2rem;width: 95%;margin: auto;background-color: white;
}
.kk-block-head{
  height: 1.5rem;padding:0.3rem 0.6rem;
  border-bottom: 1px solid rgba(120,120,120,.1);
}
.kk-block-head h4{font-weight: lighter}
.kk-block-body{
  min-height: 2rem;
  padding:0.3rem 0.6rem;
  color: grey;
}
.kk-block-body p{
  font-size:0.7rem
}
.kk-block-body p span{
  color:darkgray;
}
.kk-block-foot{
  background-color: rgba(230,230,230,.2);height: 1.5rem;
  padding:0.3rem
}

.radius-border{
  position: relative;
}
.tiny-text{font-size:0.5rem;color:grey}
.mid-text{font-size:0.7rem;color:grey}
.panel-title-right{
  display: inline-block;
  position: absolute;
  top: 40%;
  margin-top: -4px;
  cursor: pointer;
  right: 1rem;
}

@media screen and (-webkit-min-device-pixel-ratio: 2){
  .radius-border:before{
    content: "";
    pointer-events: none; /* 防止点击触发 */
    box-sizing: border-box;
    position: absolute;
    width: 200%;
    height: 200%;
    left: 0;
    top: 0;
    border-radius: 8px;
    border:1px solid #999;
  -webkit-transform(scale(0.5));
    -webkit-transform-origin: 0 0;
  transform(scale(0.5));
    transform-origin: 0 0;
  }
}

.kk-top-block{
position: relative;
  height: 7rem;
  background-color: white;
}
.kk-v-center{
  position: absolute;
  left: 0;right: 0;top:0;bottom:0;margin: auto;
}
.kk-cycle{border-radius: 50%}
.kk-bgcolor-gray{background-color: #ecebe8}
.kk-black-border{border:1px #6e6c64 solid;padding:0.5rem;margin:0.5rem;background-color: white;
  -moz-box-shadow:2px 4px 15px #333333; -webkit-box-shadow:2px 4px 15px #333333; box-shadow:2px 4px 15px #333333;}
.kk-ul{list-style: none;}
.kk-ul li{width: 30%;float: left;height: 2rem;padding:0px 5px}
.kk-ul input{vertical-align: middle}
.kk-ul input[type="radio"]{width: 1rem;height:1rem}

.kk-full-block{
  -webkit-tap-highlight-color: rgba(0,0,0,0);color: inherit;
  width: 100%;
  background-color: white;
  padding:0.5rem;
  margin: 0.3rem 0rem;
}
.kk-full-block-title{height: 1.3rem; }
.kk-flex{display: flex;padding:0.5rem;text-align: center}
.kk-flex-1{flex: 1}
.kk-flex-1 p{font-size: 0.6rem}
.kk-border-bottom{
  border-bottom: solid rgba(50,50,50,.2)  1px;padding-bottom: 0.4rem
}
.kk-border-top{
  border-top: solid rgba(50,50,50,.2)  1px;padding-bottom: 0.4rem;
  padding-top:0.3rem
}
.kk-foot{
  padding:0.3rem;position: fixed;bottom:0rem;width: 100%;
}
.kk-ul-ho{
  list-style: none;
  width: 100%;
  display: inline-block;
}
.kk-ul-ho li{
  float: left;width: 47%;
  padding:0.2rem;
  background-color: #d5d6d6;
  border-radius: 3px;
  border:#9a9d9f 1px solid;
}
.kk-ul-ho li span{

}

.slide-wraper{

}
.slide-box{
  display: -webkit-box;
  overflow-x: scroll;
  -webkit-overflow-scrolling:touch;
  background-color: white;
  padding:0.3rem
}
.slide-item{
  border:1px solid #ccc;
  margin-right: 0.4rem;
  padding:0.1rem;
  border-radius: 0.3rem;
  background-color: #e6e7e7;
}
.tinyInput{width: 1.5rem;height: 1rem;line-height: 1rem;border-radius: 5px}

/* Prevent text and blocks selection */
input.labelauty + label ::selection { background-color: rgba(255, 255, 255, 0); }
input.labelauty + label ::-moz-selection { background-color: rgba(255, 255, 255, 0); }

/* Hide original checkboxes. They are ugly! */
input.labelauty { display: none !important; }

/*
 * Let's style the input
 * Feel free to work with it as you wish!
 */
input.labelauty + label
{
  margin-top:0.2rem;
  display: inline-flex;
  padding: 10px 10px;
  background-color: #efefef;
  color: #b3b3b3;
  cursor: pointer;

  border-radius: 3px 3px 3px 3px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;


  transition: background-color 0.25s;
  -moz-transition: background-color 0.25s;
  -webkit-transition: background-color 0.25s;
  -o-transition: background-color 0.25s;

  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

/* Stylish text inside label */

input.labelauty + label > span.labelauty-unchecked,
input.labelauty + label > span.labelauty-checked
{
  display: inline-block;
  line-height: 16px;
  vertical-align: middle;
}

/* Stylish icons inside label */

input.labelauty + label > span.labelauty-unchecked-image,
input.labelauty + label > span.labelauty-checked-image
{
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: left center;

  transition: background-image 0.5s linear;
  -moz-transition: background-image 0.5s linear;
  -webkit-transition: background-image 0.5s linear;
  -o-transition: background-image 0.5s linear;
}

/* When there's a label, add a little margin to the left */
input.labelauty + label > span.labelauty-unchecked-image + span.labelauty-unchecked,
input.labelauty + label > span.labelauty-checked-image + span.labelauty-checked
{
  margin-left: 7px;
}

/* When not Checked */
input.labelauty:not(:checked):not([disabled]) + label:hover
{
  background-color: #eaeaea;
  color: #a7a7a7;
}
input.labelauty:not(:checked) + label > span.labelauty-checked-image
{
  display: none;
}

input.labelauty:not(:checked) + label > span.labelauty-checked
{
  display: none;
}

/* When Checked */
input.labelauty:checked + label
{
  background-color: #3498db;
  color: #ffffff;
}

input.labelauty:checked:not([disabled]) + label:hover
{
  background-color: #72c5fd;
}
input.labelauty:checked + label > span.labelauty-unchecked-image
{
  display: none;
}

input.labelauty:checked + label > span.labelauty-unchecked
{
  display: none;
}

input.labelauty:checked + label > span.labelauty-checked
{
  display: inline-block;
}

input.labelauty.no-label:checked + label > span.labelauty-checked
{
  display: block;
}

/* When Disabled */
input.labelauty[disabled] + label
{
  opacity: 0.5;
}

/* Add a background to (un)checked images */
input.labelauty + label > span.labelauty-unchecked-image
{
  background-image: url( ../mod-page/images/input-unchecked.png );
}

input.labelauty + label > span.labelauty-checked-image
{
  background-image: url( ../mod-page/images/input-checked.png );
}